<template>
  <div class="mall" ref="mall" :style="{height:MydivHeight}">
    <div class="mallSwiper" :style="{height:mallSwiperHeight}">
      <!-- <swiper :options="swiperOption" ref="mySwiper"> -->
        <!-- slides -->
        <!-- <swiper-slide v-for="(item,index) in items" :key="index"> -->
        <!-- <swiper-slide> -->
          <!-- <img v-bind:src="item.simplImg" alt=""> -->
          <!-- </swiper-slide> -->
      <!-- </swiper> -->
      <router-link to='/facialMask'>
        <div class="mallSwiper" @click="turnMask">
          <img src="../assets/mm/banner.png">
        </div>
      </router-link>
    </div>
    <dl class="menu_mall">
      <!-- <dd>
        <router-link :to="'/hotCake/'+-1">
          <div>
            <img src="../assets/menu/hot.png" alt="">
          </div>
          <span>
            爆款
          </span>
        </router-link>
      </dd> -->
      <!-- <dd>
        <router-link :to="'/recommend/'+-1">
          <div>          
            <img src="../assets/menu/tj.png" alt="">
          </div>
          <span>
            推荐 
          </span>
        </router-link>
      </dd> -->
      <!-- <dd>
        <router-link :to="'/flashSale/'+-1">
          <div>
            <img src="../assets/menu/xsqg.png" alt="">
          </div>
          <span>
            限时抢购
          </span>
        </router-link>
      </dd> -->
      <dd>
        <router-link :to="'/sellAgain/'+-1">
          <div>
            <img src="../assets/mall/x.png" alt="">
          </div>
          <span>
            复消专区
          </span>
        </router-link>
      </dd>
      <dd>
        <router-link to='/activity'>
          <div>
            <img src="../assets/mall/n.png" alt="">
          </div>
          <span>
            活动专区
          </span>
        </router-link>
      </dd>
      <dd @click="turnMask">
        <router-link to='/facialMask'>
          <img class="newLogo" src="../assets/mall/new.png" alt="">
          <div>
            <img src="../assets/mall/mm.png" alt="">
          </div>
          <span>
            好礼周周领
          </span>
        </router-link>
      </dd>
      <dd >
        <router-link :to="'/category/'+7+'/'+0">          
          <div>          
            <img src="../assets/mall/k.png" alt="">
          </div>
          <span>
            分类
          </span>
        </router-link>
      </dd>
      <!-- <dd @click="test">
          <div>          
            <img src="../assets/menu/dh.png" alt="">
          </div>
          <span>
            兑换专区
          </span>
      </dd> -->
      <dd>
        <router-link to='/shopCart'>
          <div>          
            <img src="../assets/mall/l.png" alt="">
            <!-- <img src="../assets/11/gwc.png" alt=""> -->
          </div>
          <span>
            购物车
          </span>
        </router-link>
      </dd>
      <!-- 资讯 -->
      <div class="consulting">
        <img src="../assets/consult/zx.png" alt="">
        <span class="consult_txt">
          乐销商城，重磅上线！
        </span>
        |
        <span @click="getInfo">
          更多
        </span>
      </div>
    </dl>
    <!-- 商品区 -->
    <div class="goods_mall">
      <p class="goods_describe">
        — 中高端产品 平民化消费 —
      </p>
      <dl class="goods_list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" infinite-scroll-immediate-check="loading">
        <dd v-for="(goodsList,index) in goodsList" :key="index" @click="seeSec(goodsList.id)">
          <div class="goods_img">
            <img v-bind:src="goodsList.thumbnail" alt="产品图片">
          </div>
          <div class="goods_Sec">
            <p class="goods_title">
              {{goodsList.name}}
            </p>
            <div class="price_cart">
              <span class="goods_price">
                {{goodsList.defaultPrice/100 |currency}}
              </span>
              <div class="cart_channel">
                <div class="channel_Btn" @click="lookEarnings(goodsList.clearPrice, goodsList.defaultPrice)" @click.stop v-if="userInfo.channelLv!==-1">
                  收益
                </div>
                <div class="goods_cart">
                  <img src="../assets/mall/mallCart.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </dd>
      </dl>
      <!-- 加载动画 -->
      <loadmore v-show="loadingDom"></loadmore>
    </div>
    <!-- 收益 -->
    <earningsPop ref="earnings"></earningsPop>
    <!-- tab菜单栏 -->
    <tabbar :selected='selected' :tabs='tabs'></tabbar>
  </div>
</template>
<script>
  import tabbar from '../components/tabbar'
  import loadmore from '../components/loadmore'
  import earningsPop from '../components/earningsPop'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import { userInfoGet, WXShare } from '../libs/publicMethod'
  import { product, getBanners, getContext } from '../libs/interface'
  import config from '../config'
  const IMG_ROOT = config.IMG_ROOT
  export default {
    components: { tabbar, loadmore, earningsPop, config, swiper, swiperSlide, userInfoGet, WXShare, product, getBanners, getContext },
    data () {
      return {
        userInfo: userInfoGet(),
        // tabbar初始化
        selected: 'tab1',
        IMG_ROOT:IMG_ROOT,// 图片地址
        MydivHeight: '',
        tabs: [
          require('../assets/tabs/sc2.png'),
          require('../assets/tabs/zq.png'),
          require('../assets/tabs/fx.png'),
          require('../assets/tabs/ylc.png'),
          require('../assets/tabs/user.png')
        ],        
        loading: false, // 下拉参数
        loadingDom: false, // 下拉参数
        offset: sessionStorage.getItem('mallScrollOffset') ? JSON.parse(sessionStorage.getItem('mallScrollOffset')).offset || 0 : 0,
        mallSwiperHeight:0, // banner高度
        // 轮播初始化
        swiperOption: {
          autoplay: true,
          initialSlide: 1,
          loop: true,
          pagination: '.swiper-pagination',          
          observer: true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents: true,//修改swiper的父元素时，自动初始化swiper
        },
        // 轮播图
        items: [],
        // 商品列表
        goodsList: [],
        coefficient: 0, // 商品系数
        showPoP: false, // 显示收益弹窗
        totalPrice: 0, // 商品总价
      }
    },
    mounted(){
      let vm = this
      document.body.style.paddingBottom = '60px'
      vm.MydivHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight - 60 + 'px'
      vm.getBanners();
      // 轮播高度
      vm.mallSwiperHeight = window.document.body.clientWidth*0.36256 + 'px';
      // 分享
      var Sdata = {                                                          //分享请求配置
        gotoPage:vm.$route.path,                                          //邀请者链接         
        inviterID: userInfoGet().id,                                                        //链接带的参数
        type:1,
        desc:'享高端品质，品精致生活，尽在乐销商城！',
        imgUrl:'http://120.77.73.224:80/group1/M00/00/05/eE1J4FoedWqALp8pAABLzkI6gxQ837.png',                                                       //链接图片（小图）     
        shareTitle: '【' + userInfoGet().nick + '】' + '邀请您一起逛乐销商城'               //邀请话
      }
      WXShare.topShare(Sdata);
      if (sessionStorage.getItem('mallScrollOffset')) {
        let mallSO = JSON.parse(sessionStorage.getItem('mallScrollOffset'))
        mallSO.offset += 10
        vm.loadGoods(mallSO.offset, (data)=>{
          if (data.code === 1 && data.payload.length>0) {
            vm.goodsList = data.payload
            vm.$nextTick(() => {
              vm.$refs.mall.scrollTop = mallSO.scroll
              setTimeout(() => {
                sessionStorage.removeItem('mallScrollOffset')
              }, 0)
            })
          } else {
            vm.$toast('暂未请求到数据,请稍后再试')
          }
        });
      } else {        
        vm.loadGoods(10, (data)=>{    
          if (data.code === 1 && data.payload.length>0) {
            vm.goodsList = data.payload
          } else {
            vm.$toast('暂未请求到数据,请稍后再试')
          }
        });
      }
    },
    methods :{
      test () {
        this.$toast('暂未开放')
      },
      turnMask () {
        sessionStorage.removeItem('inviterID')
      },
      getInfo () {        
        this.$router.push('/found/0')
      },
      // 加载商品
      loadGoods (val, callback) {
        let vm = this
        let params = {
          productType: -1,
          runType: -1,
          limit: val,
          offset: 0,
          likeStr: '',
          sidx: 'createTime',
          sord: 'DESC'
        }
        product(params,(data)=>{ 
          return callback(data)   
        })
      },
      // 上拉加载更多
      loadMore() {
        let vm = this
        if (sessionStorage.getItem('mallScrollOffset')) return null
        vm.loading = true
        vm.loadingDom = true
        vm.offset += 10
        let params = {
          productType: -1,
          runType: -1,
          limit: 10,
          offset: vm.offset,
          likeStr: '',
          sidx: 'createTime',
          sord: 'DESC'
        }
        product(params,(data)=>{   
          if (data.code === 1 && data.payload.length > 0) {
            vm.$nextTick(()=>{
              data.payload.forEach((item) => {    
                vm.goodsList.push(item)                
                // console.log(vm.goodsList)    
              })
            })
            vm.loading = false
          } else {
            vm.loading = true
            vm.offset -= 10
            vm.$toast('暂未请求到数据,请稍后再试')
          }
          vm.loadingDom = false
        })
      },
      // 跳转详情页
      seeSec (val) {
        let vm = this
        // sessionStorage.setItem('coupon', JSON.stringify({ coupon: false, isFund: false }))
        sessionStorage.removeItem('coupon')
        // sessionStorage.setItem('mallScrollOffset',JSON.stringify({scroll: document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop , offset: vm.offset}))
        sessionStorage.setItem('mallScrollOffset',JSON.stringify({scroll: vm.$refs.mall.scrollTop , offset: vm.offset}))
        vm.$router.push('/goods/' + val)
      },
      // 查看收益
      lookEarnings (clearPrice, defaultPrice) {
        let vm = this
        vm.$refs.earnings.showbox(true)
        vm.$refs.earnings.computeEarnings(clearPrice, defaultPrice)
      },
      getBanners(){
        let vm = this
        let params = {
          offset: 0, // 取多少条数据
          limit: 20,
          type: 0
        }
        getContext(params, (data) => {
          if(data.code === 1){
            vm.items = data.payload
          } else {
            vm.$toast('暂无数据')
          } 
        })
      }
    },
    filters: {
      currency: function (value) {
        if (!value) return ''
        return '￥' + value
      }
    }
  }
</script>
<style>
/* 公用样式 */
a{
  color: black;
  text-decoration: none;
}
.mall{
    overflow: auto;
}
/* 轮播 */
.mallSwiper{
  position: relative;
  /* overflow: hidden; */
}
.mallSwiper .swiper-container{
  height: 100%;
}
/* .mallSwiper img{
  height:100%;
} */
.mallSwiper img{
  display: block;
  width: 100%;
}
/* 菜单 */
.menu_mall{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: white;
  /* padding: .8rem .8rem .8rem .3rem; */
  padding: .8rem .8rem .1rem .3rem;
  /* font-size: .8rem; */
  font-size: .7rem;
  box-sizing: border-box;
  margin-top: 19%;
}
.menu_mall dd{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* width:23%; */
  width: 20%;
  /* margin-left: 2%; */
  padding: .5rem 0;
  box-sizing: border-box;
  position: relative;
}
.menu_mall dd div{
  /* width: 3rem; */
  width: 3rem;
  /* height: 3rem; */
  height: 3rem;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 0 auto;
}
.menu_mall dd div img{
  width: 80%;
  height: 80%;
}
.menu_mall dd .newLogo{
  width: 30%;
  position: absolute;
  top: .3rem;
  right: .2rem;
}
.menu_mall dd span{
  display: inline-block;
  transform: scale(.9,.9);
}
/* 资讯 */
.consulting{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  padding: .5rem 0;
  width: 90%;
  margin-left: 5%;
  box-sizing: border-box;
}
.consulting img{
  height: 1rem;
}
.consult_txt{
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 商品区 */
.goods_mall{
  background-color: white;
  margin-top: .5rem;
  padding-top: .5rem;
}
.goods_describe{
  font-size: .8rem;
  color: #999;
}
/* 商品列表 */
.goods_list{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-top: .5rem;
  font-size: .75rem;
}
.goods_list dd{
  width: 47.5%;
  -moz-box-shadow: 0rem 3px 3px 0rem rgba(200,200,200,.5);
  -webkit-box-shadow: 0rem 3px 3px 0rem rgba(200,200,200,.5);
  box-shadow: 0rem 3px 3px 0rem rgba(200,200,200,.5);
  border-radius: .8rem;
  overflow: hidden;
  margin-left: 1.5%;
  margin-bottom: .5rem;
}
.goods_img{
  width: 100%;
  height: 8rem;
}
.goods_img img{
  width: 100%;
  height: 100%;
}
.goods_Sec{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: .8rem;
}
.goods_title{
  font-size: .9rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: rgba(51,51,51,1);
}
.price_cart{  
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.goods_price{
  font-size: 1rem;
  color: red;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods_cart{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(231, 224, 255,.8);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: .3rem;
  box-sizing: border-box;
}
.cart_channel{  
  display: flex;
  flex-direction: row;  
  justify-content: space-around;
  align-items: center;
}
.channel_Btn{
  margin-right: .2rem;
  border: 1px solid #999;
  padding: .2rem .3rem;
  border-radius: 1rem;
  font-size: .6rem;
}
.goods_cart img{
  width: 80%;
}
</style>
